<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <!-- <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item> -->
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.res_person"
          placeholder="负责人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
        <el-button icon="el-icon-plus" @click="handleItem()">代偿立项</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <instead-item-dialog
      :visible.sync="itemVisible"
      @success="getData(params.index)"
      :query-id="queryId"
      :table-id="tableId"
    ></instead-item-dialog>

    <post-view :visible.sync="detailVisible" :related-id="viewQueryId" tab-name="fristTab">
      <template v-slot:header>
        <el-tab-pane label="代偿立项信息" name="fristTab">
          <instead-item-view
            :query-id="viewQueryId"
            :table-id="viewTableId"
            view-mode
          ></instead-item-view>
        </el-tab-pane>
        <el-tab-pane label="追偿记录">
          <recovery-history :comps-id="viewTableId"></recovery-history>
        </el-tab-pane>
      </template>
    </post-view>

    <recovery-history-dialog
      :visible.sync="recoveryVisbie"
      :query-id="recoveryQueryId"
      :comps-id="compsId"
    ></recovery-history-dialog>

    <flow-dialog
      title="代偿追偿审批流程"
      :visible.sync="flowVisible"
      flow-key="COMPS_APPROVAL"
    ></flow-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import InsteadItemDialog from '@/credit/views/city/risk/instead/MainDialog'
import InsteadItemView from '@/credit/views/city/risk/instead/Main'
import RecoveryHistory from '@/credit/views/city/risk/recovery/RecoveryHistory'
import RecoveryHistoryDialog from '@/credit/views/city/risk/recovery/RecoveryHistoryDialog'
import FlowDialog from '@/credit/components/flow/ViewDialog'
import PostView from '@/credit/views/city/risk/PostView'

export default {
  components: {
    RecoveryHistory,
    RecoveryHistoryDialog,
    InsteadItemDialog,
    InsteadItemView,
    FlowDialog,
    PostView,
  },
  data() {
    return {
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
      },
      loading: false,
      tableName: 'comps_view',
      tableData: [],
      tableColumns: [
        { attrs: { label: '主体名称', prop: 'customer_name' } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
        {
          attrs: { label: '代偿时间', prop: 'reach_time', align: 'center', width: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '代偿合计金额（元）', prop: 'reach_total_amount', align: 'center' } },

        { attrs: { label: '代偿申请人', prop: 'submit_person_name', align: 'center' } },
        {
          attrs: { label: '待审核人员', prop: 'task_person_name', align: 'center' },
        },
        {
          attrs: { label: '审批流程', align: 'center', width: 80, fixed: 'right' },
          operations: [{ content: '流程', icon: 'fa fa-sitemap', event: this.handleFlow }],
        },
        {
          attrs: { label: '操作', align: 'center', width: 130, fixed: 'right' },
          operations: [
            {
              content: '修改立项',
              icon: 'fa fa-edit',
              event: this.handleItem,
              ifRender: row =>
                (+row.comps_status === 0 && row.submit_person === this.userId) ||
                row.task_person === this.userId,
            },

            {
              content: '追偿',
              icon: 'fa fa-edit',
              event: this.handleRecovery,
              ifRender: row => +row.comps_status === 2,
            },

            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleDetail,
            },
          ],
        },
      ],
      totalCount: 0,
      itemVisible: false,
      queryId: '',
      tableId: '',

      detailVisible: false,
      viewQueryId: '',
      viewTableId: '',
      viewCompsId: '',
      detailData: {},

      recoveryVisbie: false,
      recoveryQueryId: '',
      compsId: '',

      active: 'fristTab',
      flowVisible: false,
    }
  },
  computed: {
    ...mapGetters(['userId', 'job', 'clientId']),
  },
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  methods: {
    handleFlow() {
      this.flowVisible = true
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.overdue_letter_date = this.$utils.dateFormat(item.overdue_letter_date, 'yyyy-MM-dd')

      return item
    },
    handleRecovery(row) {
      this.recoveryVisbie = true
      this.recoveryQueryId = row.customer_related_id || ''
      this.compsId = row.id
    },
    handleItem(row) {
      this.queryId = row ? row.customer_related_id : ''
      this.tableId = row ? row.id : ''
      this.itemVisible = true
    },
    handleDetail(row) {
      this.active = 'fristTab'
      this.detailData = { ...row }
      this.viewQueryId = row ? row.customer_related_id : ''
      this.viewTableId = row ? row.id : ''
      this.detailVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
